<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建资产 - AssetVerify</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1E1E20',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 12px 0 rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 4px 20px 0 rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/95 shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center">
                        <div class="bg-primary text-white p-2 rounded-lg mr-2">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-neutral-700">AssetVerify</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">首页</a>
                    <a href="create.html" class="text-primary font-medium border-b-2 border-primary pb-1">创建资产</a>
                    <a href="register.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">资产上链</a>
                    <a href="query.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">查询资产</a>
                    <a href="transfer.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">转移资产</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-neutral-600 hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-neutral-200">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">首页</a>
                <a href="create.html" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/5">创建资产</a>
                <a href="register.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">资产上链</a>
                <a href="query.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">查询资产</a>
                <a href="transfer.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">转移资产</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow pt-24 pb-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-neutral-700">创建资产</h1>
                <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">
                    填写以下信息，创建您的数字资产记录。所有字段均为必填项。
                </p>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="bg-white rounded-xl shadow-card p-8 border border-neutral-200">
                    <form id="create-asset-form" class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="asset-id" class="block text-sm font-medium text-neutral-700 mb-1">资产ID</label>
                                <input type="text" id="asset-id" name="asset-id" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="系统将自动生成" readonly>
                                <button type="button" id="generate-id" class="mt-2 text-primary hover:text-primary/80 text-sm font-medium flex items-center">
                                    <i class="fa fa-refresh mr-1"></i> 重新生成
                                </button>
                            </div>
                            
                            <div>
                                <label for="asset-owner" class="block text-sm font-medium text-neutral-700 mb-1">资产所有者</label>
                                <input type="text" id="asset-owner" name="asset-owner" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入资产所有者姓名或机构名称">
                            </div>
                        </div>
                        
                        <div>
                            <label for="asset-name" class="block text-sm font-medium text-neutral-700 mb-1">资产名称</label>
                            <input type="text" id="asset-name" name="asset-name" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入资产名称">
                        </div>
                        
                        <div>
                            <label for="asset-type" class="block text-sm font-medium text-neutral-700 mb-1">资产类型</label>
                            <select id="asset-type" name="asset-type" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                <option value="" disabled selected>请选择资产类型</option>
                                <option value="digital">数字资产</option>
                                <option value="real-estate">房地产</option>
                                <option value="intellectual-property">知识产权</option>
                                <option value="vehicle">交通工具</option>
                                <option value="other">其他类型</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="asset-description" class="block text-sm font-medium text-neutral-700 mb-1">资产描述</label>
                            <textarea id="asset-description" name="asset-description" rows="4" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom resize-none" placeholder="请详细描述您的资产，包括特征、规格、历史等信息"></textarea>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1">资产证明文件</label>
                            <div class="mt-2 border-2 border-dashed border-neutral-300 rounded-lg p-6 text-center hover:border-primary transition-custom">
                                <input type="file" id="asset-file" name="asset-file" class="hidden" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                                <label for="asset-file" class="cursor-pointer">
                                    <i class="fa fa-cloud-upload text-3xl text-neutral-400 mb-2"></i>
                                    <p class="text-neutral-600">点击上传资产证明文件</p>
                                    <p class="text-xs text-neutral-500 mt-1">支持 PDF, JPG, PNG, DOCX 格式</p>
                                </label>
                            </div>
                        </div>
                        
                        <div class="pt-4">
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-lg transition-custom font-medium flex items-center justify-center">
                                <i class="fa fa-plus-circle mr-2"></i> 创建资产记录
                            </button>
                        </div>
                    </form>
                </div>
                
                <div class="mt-12 bg-white rounded-xl shadow-card p-8 border border-neutral-200">
                    <h3 class="text-xl font-semibold text-neutral-700 mb-6">资产创建指南</h3>
                    
                    <div class="space-y-6">
                        <div class="flex">
                            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-primary font-bold">1</span>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">准备必要信息</h4>
                                <p class="text-neutral-500 mt-1">
                                    在创建资产前，请准备好资产所有者信息、资产名称、类型和详细描述。确保您拥有合法的资产所有权证明。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-primary font-bold">2</span>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">填写资产信息</h4>
                                <p class="text-neutral-500 mt-1">
                                    准确填写表单中的所有字段，资产ID将由系统自动生成。对于重要资产，请提供尽可能详细的描述。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-primary font-bold">3</span>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">上传证明文件</h4>
                                <p class="text-neutral-500 mt-1">
                                    上传能够证明资产所有权和真实性的文件，如产权证、合同、证书等。文件将被加密存储，确保安全性。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-primary font-bold">4</span>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">提交审核</h4>
                                <p class="text-neutral-500 mt-1">
                                    提交后，我们的审核团队将在24小时内验证您的信息。审核通过后，您可以选择将资产上链，获得永久的区块链公证。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-800 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center mb-6">
                        <div class="bg-primary text-white p-2 rounded-lg mr-2">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">AssetVerify</span>
                    </div>
                    <p class="text-neutral-400 mb-6">
                        专业的区块链资产公证平台，为您的资产提供安全、透明、可信的公证服务。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-neutral-400 hover:text-white transition-custom">首页</a></li>
                        <li><a href="create.html" class="text-neutral-400 hover:text-white transition-custom">创建资产</a></li>
                        <li><a href="register.html" class="text-neutral-400 hover:text-white transition-custom">资产上链</a></li>
                        <li><a href="query.html" class="text-neutral-400 hover:text-white transition-custom">查询资产</a></li>
                        <li><a href="transfer.html" class="text-neutral-400 hover:text-white transition-custom">转移资产</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">服务支持</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">帮助中心</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">常见问题</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">使用教程</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">法律条款</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">隐私政策</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">北京市海淀区中关村科技园区8号楼15层</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">contact@assetverify.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">+86 10 8888 8888</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">周一至周五: 9:00 - 18:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-700 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-neutral-500 text-sm">
                        &copy; 2025 AssetVerify. 保留所有权利。
                    </p>
                    <div class="mt-4 md:mt-0">
                        <ul class="flex space-x-6">
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">隐私政策</a></li>
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">服务条款</a></li>
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">Cookie政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('bg-white/95');
                navbar.classList.add('bg-white');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('bg-white/95');
                navbar.classList.remove('bg-white');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 生成随机资产ID
        document.getElementById('generate-id').addEventListener('click', function() {
            generateAssetId();
        });
        
        // 页面加载时生成资产ID
        window.addEventListener('load', function() {
            generateAssetId();
        });
        
        // 生成随机资产ID的函数
        function generateAssetId() {
            const prefix = 'ASSET-';
            const date = new Date();
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const random = Math.random().toString(36).substring(2, 8).toUpperCase();
            
            const assetId = `${prefix}${year}${month}${day}-${random}`;
            document.getElementById('asset-id').value = assetId;
        }
        
        // 文件上传处理
        document.getElementById('asset-file').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const fileName = file.name;
                alert(`已选择文件: ${fileName}`);
                // 实际应用中可以在这里添加文件预览或上传逻辑
            }
        });
        
        // 表单提交处理
        document.getElementById('create-asset-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 收集表单数据
            const formData = {
                assetId: document.getElementById('asset-id').value,
                owner: document.getElementById('asset-owner').value,
                name: document.getElementById('asset-name').value,
                type: document.getElementById('asset-type').value,
                description: document.getElementById('asset-description').value,
                file: document.getElementById('asset-file').files[0]
            };
            
            // 简单验证
            if (!formData.owner || !formData.name || !formData.type || !formData.description) {
                alert('请填写所有必填字段');
                return;
            }
            
            // 实际应用中这里会发送数据到服务器
            console.log('表单数据:', formData);
            
            // 显示成功消息
            alert('资产记录创建成功！您可以继续进行资产上链操作。');
            
            // 重置表单
            // document.getElementById('create-asset-form').reset();
            // generateAssetId();
        });
    </script>
</body>
</html>
    